<template>
	<view class="login-container">
		<common-title :title="titleContent" @clickLeft="backToUpPage" @clickRight="registration"></common-title>
		<view class="login-form-container">
			<!-- 产品ip -->
			<view class="app-ip">
				<image class="app-ip-image" src="../../static/images/appIP/pig.png"></image>
				<view class="app-name">猪小妹之家</view>
			</view>
			<!-- 登录表单 -->
			<view class="login-form">
				<!-- 账号 -->
				<view class="form-item">
					<text class="form-label">账号 :</text>
					<view class="form-label-input">
						<input focus v-model="account" placeholder="请输入账号" @input="accountClear" />
						<uni-icons v-if="clearShow" type="close" @click="clearAccount" ></uni-icons>
					</view>
				</view>
				  <!-- 密码 -->
				<view class="form-item">
					<text class="form-label">密码 :</text>
					<view class="form-label-input">
						<input v-model="password" :type="passwordType" placeholder="请输入密码" @input="passwordShow" />
						<uni-icons v-if="showEye" type="eye" @click="togglePasswordVisibility" ></uni-icons>
						<uni-icons v-if="showEyeSlash" type="eye-slash" @click="togglePasswordVisibility" ></uni-icons>
					</view>
				</view>
				<!-- 登录 -->
				<button class="login-submit" @click="login"><text >登录</text></button>
			</view>
		</view>
		<uni-popup ref="popupSuccess" type="message" :style="{ paddingTop: statusBarHeight + 'px' }" >
			<uni-popup-message type="success" :message="successMessage" :duration="1500"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popupError" type="message" :style="{ paddingTop: statusBarHeight + 'px' }">
			<uni-popup-message type="error" :message="errorMessage" :duration="1500"></uni-popup-message>
		</uni-popup>

	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { userLogin } from '../../utils/apiMine.js';
	import { encrypt } from '../../utils/crypto.js';
	import { setDataToStorage } from '../../utils/commonUtils.js';
	const statusBarHeight = ref(0);
	// 获取系统信息，并获取状态栏高度
	uni.getSystemInfo({
	    success: (res) => {
	        statusBarHeight.value = res.statusBarHeight; // 保存状态栏高度
	    },
	});
	//==============================标题===============================
	//标题内容
	const titleContent = ref({
		left:'返回',
		midst:'用户登录',
		right: '注册'
	});
	//返回主页
	const backToUpPage = () => {
		uni.switchTab({
			url:'/pages/index/index'
		});
	};
	//用户注册
	const registration = () => {
		uni.redirectTo({
			url:'/pages/register/register'
		})
	};
	//-----------------------------登录表单-----------------------------------
	const account = ref('');
	const clearShow = ref(false);
	
	const accountClear = () => {
	  clearShow.value = account.value.length > 0;
	};
	
	// 清空账号输入框
	const clearAccount = () => {
	  account.value = '';
	  clearShow.value = false;
	};
	
	const password = ref('');
	const passwordType = ref('password'); // 默认类型为password
	const showEye = ref(false);
	const showEyeSlash = ref(false);
	
	const passwordShow = () => {
	  showEye.value = password.value.length > 0;
	  showEyeSlash.value = false; // 默认不显示eye-slash
	};
	
	// 切换密码可见性
	const togglePasswordVisibility = () => {
	  if (passwordType.value === 'password') {
	    passwordType.value = 'text';
	    showEye.value = true;
	    showEyeSlash.value = false;
	  } else {
	    passwordType.value = 'password';
	    showEye.value = false;
	    showEyeSlash.value = true;
	  }
	};
	//-----------------------------登录表单-----------------------------------
	const popupSuccess = ref(null);
	const popupError = ref(null);
	const successMessage = ref('');
	const errorMessage = ref('');
	const login = async () => {
		if (account.value.length === 0) {
			errorMessage.value = "请输入账号!";
			popupError.value.open();
		}
		else if (password.value.length === 0) {
			errorMessage.value = "请输入账号!";
			popupError.value.open();
		}
		else {
			const payload = {
				account: account.value,
				passwd: encrypt(password.value)
			}
			let res = await userLogin(payload);
			if (res.status === '1002') {
				// console.log(res.message);
				errorMessage.value = res.message;
				popupError.value.open();
				password.value = '';
			}
			else {
				// console.log(res);
				// console.log(res.token);
				password.value = '';
				uni.setStorage({
					key: 'token',
					data: res.token,
					success: function () {
						// console.log('success');
						// console.log(res.id);
						setDataToStorage('userAccount', account);
						uni.setStorage({
							key:'userId',
							data:res.id
						});
						uni.reLaunch({
							url:'/pages/mine/mine',
							success:function(){
								uni.showToast({
									title:'登录成功'
								})
							}
						})
					}
				});
			}
			
		}
	};
</script>

<style lang="scss" scoped>
	.login-container{
		.login-form-container{
			.app-ip{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 50rpx 0;
				.app-name{
					font-family: 'Noto Sans TC', sans-serif; // 使用 Noto Sans TC 字体
					font-size: 26px;                       // 设置字号
					text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); // 字体阴影
					text-align: center;                    // 文本居中
					margin: 10px 0;                        // 外边距
				}
				.app-ip-image{
					width: 226rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}
			.login-form{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// background-color: antiquewhite;
				.form-item{
					display: flex;
					align-items: center;
					justify-content: center;
					.form-label{
						font-size: 32rpx;
					}
					.form-label-input{
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 20rpx 30rpx;
						padding: 10rpx;
						border: 1px solid rgb(0, 0, 0, 0.3); /* 透明边框 */
						font-size: 32rpx;
						width: 300rpx;
						input{
							width: 300rpx;
						}
					}
				}
				.login-submit{
					background-color: #87CEEB;
					margin: 60rpx;
					width: 300rpx;
				}
			}
		}
	}
	
	
	
	
	
	
</style>
